<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<#include "/header.html">
			<script src="${request.contextPath}/statics/ckeditor/ckeditor.js"></script>
			<script src="${request.contextPath}/statics/libs/ajaxupload.js"></script>
			<!-- 引入组件库 -->
			<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
			<script src="https://unpkg.com/element-ui/lib/index.js"></script>

			<script>
				var p_desc
				window.onload = function() {
					p_desc = CKEDITOR.replace('description');
				};

				function con() {
					console.log(p_desc.getData())
				}
			</script>
	</head>
	<style>
		table.gridtable {
			font-family: verdana, arial, sans-serif;
			font-size: 11px;
			color: #333333;
			border-width: 1px;
			border-color: #666666;
			border-collapse: collapse;
		}
		
		table.gridtable th {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #dedede;
		}
		
		table.gridtable td {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #ffffff;
		}
	</style>

	<body>
		<div id="rrapp">
			<div style="height: 100%;width: 100%;margin-top: 20px;">
				<div style="margin-left: 30px;margin-right: 30px;height: 15%;width: 100%;display: block;">
					<div style="display: inline-block;width: 10%;font-size: 15px;text-align: center;">标题</div>
					<div style="display: inline-block;width: 50%;">
						<input type="text" class="form-control" v-model="pinKaoCourse.title" placeholder="标题" />
					</div>
				</div>
			</div>
			<div style="height: 100%;width: 100%;margin-top: 20px;">
				<div style="margin-left: 30px;margin-right: 30px;height: 15%;width: 100%;display: block;">
					<div style="display: inline-block;width: 10%;font-size: 15px;text-align: center;">描述</div>
					<div style="display: inline-block;width: 50%;">
						<input type="text" class="form-control" v-model="pinKaoCourse.courseContent" placeholder="描述" />
					</div>
				</div>
			</div>
			<div style="height: 100%;width: 100%;margin-top: 20px;">
				<div style="margin-left: 30px;margin-right: 30px;width: 100%;display: block;">
					<div style="display: inline-block;width: 10%;font-size: 15px;text-align: center;">封面</div>
					<div style="display: inline-block;">
						<div id="coverImgs" style="display: inline-block;">
						</div>
						<a class="btn btn-primary" id="upload"><i class="fa fa-plus"></i>&nbsp;上传封面</a>
						<!--<input type="text" class="form-control" v-model="pinKaoCourse.coverImgs" placeholder="拼考内容的图片"/>-->
					</div>
				</div>
			</div>
			<div style="height: 100%;width: 100%;margin-top: 20px;">
				<div style="margin-left: 30px;margin-right: 30px;width: 100%;display: block;">
					<div style="display: inline-block;width: 10%;font-size: 15px;text-align: center;position: relative;bottom: 440px;">详情</div>
					<div style="display: inline-block;width: 50%;">
						<textarea name="description" id="description" /></textarea>
						<a class="btn btn-primary" id="upload1" style="margin-top: 10px;"><i class="fa fa-plus"></i>&nbsp;上传详情图片</a>
						<div id="Imgs" style="margin-top: 15px;">
						</div>
						<!--<input type="text" class="form-control" v-model="pinKaoCourse.courseImage" placeholder="拼考内容的图片"/>-->
					</div>
					<div style="margin-left: 15px;display: inline-block;width: 20%;position: relative;bottom:230px;">
						<p>2、每张宽度建议640像素，所有图片宽度一致；</p>
						<p>3、每张高度小于等于960像素；</p>
						<p>4、每张图片容量应小于等于3000KB；</p>
						<p>5、图片格式为：JPG\GIF\PNG；</p>
						<p>6、图片总张数建议大于5张，但不超过30张；</p>
						<p>7、为了更好的视觉呈现，图片上的文字字号建议不小于20号 </p>
					</div>
				</div>
			</div>
			<div style="height: 100%;width: 100%;margin-top: 20px;">
				<div style="margin-left: 30px;margin-right: 30px;width: 100%;display: block;">
					<div style="display: inline-block;width: 10%;font-size: 15px;text-align: center;">分类</div>
					<div style="display: inline-block;width: 50%;">
						<select v-model="pinKaoCourse.classification" class="form-control">
							<option value="考研">考研</option>
							<option value="四六级">四六级</option>
							<option value="专升本">专升本</option>
							<option value="素质培养">素质培养</option>
						</select>
					</div>
				</div>
			</div>
			<div style="height: 100%;width: 100%;margin-top: 20px;">
				<div style="margin-left: 30px;margin-right: 30px;width: 100%;display: block;">
					<div style="display: inline-block;width: 10%;font-size: 15px;text-align: center;">每团数量</div>
					<div style="display: inline-block;width: 50%;">
						<input type="number" class="form-control" v-model="pinKaoCourse.courseTeamClassification" placeholder="每团数量" />
					</div>
				</div>
			</div>
			<div style="height: 100%;width: 100%;margin-top: 20px;">
				<div style="margin-left: 30px;margin-right: 30px;width: 100%;display: block;">
					<div style="display: inline-block;width: 10%;font-size: 15px;text-align: center;">教师姓名</div>
					<div style="display: inline-block;width: 50%;">
						<input type="text" class="form-control" v-model="pinKaoCourse.courseTeacherName" placeholder="教师姓名" />
					</div>
				</div>
			</div>



			<div style="height: 100%;width: 100%;margin-top: 20px;">
				<div style="margin-left: 30px;margin-right: 30px;width: 100%;display: block;">
					<div style="display: inline-block;width: 10%;font-size: 15px;text-align: center;">原价</div>
					<div style="display: inline-block;width: 50%;">
						<input type="number" class="form-control" v-model="pinKaoCourse.oldMoney" placeholder="原价" />
					</div>
				</div>
			</div>
			<div style="height: 100%;width: 100%;margin-top: 20px;">
				<div style="margin-left: 30px;margin-right: 30px;width: 100%;display: block;">
					<div style="display: inline-block;width: 10%;font-size: 15px;text-align: center;">现价</div>
					<div style="display: inline-block;width: 50%;">
						<input type="number" class="form-control" v-model="pinKaoCourse.nowMoney" placeholder="现价" />
					</div>
				</div>
			</div>
			<div style="height: 100%;width: 100%;margin-top: 20px;">
				<div style="margin-left: 30px;margin-right: 30px;width: 100%;display: block;">
					<div style="display: inline-block;width: 10%;font-size: 15px;text-align: center;">开始时间</div>
					<div style="display: inline-block;width: 50%;">
						<el-date-picker v-model="pinKaoCourse.startTime" type="datetime" value-format="timestamp" placeholder="选择日期时间">
						</el-date-picker>
						<!--<input type="text" class="form-control" v-model="pinKaoCourse.startTime" placeholder="拼考的开始时间"/>-->
					</div>
				</div>
			</div>
			<div style="height: 100%;width: 100%;margin-top: 20px;">
				<div style="margin-left: 30px;margin-right: 30px;width: 100%;display: block;">
					<div style="display: inline-block;width: 10%;font-size: 15px;text-align: center;">结束时间</div>
					<div style="display: inline-block;width: 50%;">
						<div class="block">
							<el-date-picker v-model="pinKaoCourse.endTime" type="datetime" value-format="timestamp" placeholder="选择日期">
							</el-date-picker>
						</div>
						<!--<input type="text" class="form-control" v-model="pinKaoCourse.endTime" placeholder="拼考结束时间"/>-->
					</div>
				</div>
			</div>
			<div style="height: 100%;width: 100%;margin-top: 50px;">
				<div style="margin-left: 35%;margin-right: 30px;width: 100%;display: block;">
					<input style="margin-right: 30px;width: 100px;" type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定" />
					<input style="width: 100px;" type="button" class="btn btn-warning" @click="reload" value="返回" />
				</div>
			</div>
		</div>
	</body>
	<script>
		function setcoverImgs() {
			let img = ""
			for(let i = 0; i < vm.coverImgs.length; i++) {
				img = img + "<img src='" + vm.coverImgs[i] + "' width='100px' height='100px' style='display: inline-block;margin-right: 8px;border:1px solid rgba(0,0,0,0.75);'>"

			}
			$("#coverImgs").html(img)
		}

		function setImgs() {
			let img = ""
			let count = null;
			img = img + `
				<table class="gridtable" style="width:100%;">
					<tr>
						<th style="width:22%;text-align:center;vertical-align:middle;">图片</th>
						<th style="width:22%;text-align:center;vertical-align:middle;">时间</th>
						<th style="width:22%;text-align:center;vertical-align:middle;">操作</th>
					</tr>`

			for(let i = 0; i < vm.imgs.length; i++) {
				count = i + 1;
				img = img +
					`<tr>
						<td style="text-align:center;vertical-align:middle;">图片` + count + `</td>
						<td style="text-align:center;vertical-align:middle;">时间</td>
						<td style="text-align:center;vertical-align:middle;">
							<button style="color:white;background:#1E90FF;margin-left:8px;cursor:pointer;border:0px;" onclick="addImg('` + vm.imgs[i] + `')">插入</button>
						</td>
					</tr>`
			}
			img = img + `
				</table>
			`
			$("#Imgs").html(img)
		}

		function addImg(data) {
			let html = p_desc.getData()
			p_desc.setData(html + "<img src='" + data + "'>")
			//  CKEDITOR.instances.editor1.setData( "<img src='"+data+"' width='100px' height='100px'>" );
		}
		$(function() {
			new AjaxUpload('#upload', {
				action: baseURL + "course/teacher/upload",
				name: 'file',
				autoSubmit: true,
				responseType: "json",
				onSubmit: function(file, extension) {
					if(!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
						alert('只支持jpg、png、gif格式的图片！');
						return false;
					}
				},
				onComplete: function(file, r) {
					if(r.code == 0) {
						vm.coverImgs.push(r.returnUrl);
						setcoverImgs()
						// vm.imgPath = r.returnUrl;
						// $("#pic").attr('src',r.returnUrl);
					} else {
						alert(r.msg);
					}
				}
			});
			new AjaxUpload('#upload1', {
				action: baseURL + "course/teacher/upload",
				name: 'file',
				autoSubmit: true,
				responseType: "json",
				onSubmit: function(file, extension) {
					if(!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
						alert('只支持jpg、png、gif格式的图片！');
						return false;
					}
				},
				onComplete: function(file, r) {
					if(r.code == 0) {
						vm.imgs.push(r.returnUrl);
						setImgs()
					} else {
						alert(r.msg);
					}
				}
			});
		})
		var vm = new Vue({
			el: '#rrapp',
			data: {
				showList: true,
				title: null,
				pinKaoCourse: {
					startTime: '',
					endTime: ''
				},
				coverImgs: [],
				imgs: [],
				dialogVisible: true,
				value1: "",
			},
			methods: {
				handleRemove(file, fileList) {
					console.log(file, fileList);
				},
				handlePictureCardPreview(file) {
					this.dialogImageUrl = file.url;
					this.dialogVisible = true;
				},
				query: function() {
					vm.reload();
				},
				add: function() {
					vm.showList = false;
					vm.title = "新增";
					vm.pinKaoCourse = {};
				},
				update: function(event) {
					var pinKaoCourseId = getSelectedRow();
					if(pinKaoCourseId == null) {
						return;
					}
					vm.showList = false;
					vm.title = "修改";

					vm.getInfo(pinKaoCourseId)
				},
				saveOrUpdate: function(event) {
					var url = vm.pinKaoCourse.pinKaoCourseId == null ? "pinkao/pinkaocourse/save" : "pinkao/pinkaocourse/update";

                 //   var base = new Base64();
                    vm.pinKaoCourse.courseImage = window.btoa(p_desc.getData());

					//	vm.pinKaoCourse.courseImage=p_desc.getData()
					let ci=''
					for(let i=0;i<vm.coverImgs.length;i++){
					    ci=ci+vm.coverImgs[i]+';'
					}
					vm.pinKaoCourse.coverImgs=ci
					$.ajax({
						type: "POST",
						url: baseURL + url,
						contentType: "application/json",
						data: JSON.stringify(vm.pinKaoCourse),
						success: function(r) {
							if(r.code === 0) {
								alert('操作成功', function(index) {
									window.location.href=window.location.href
								});
							} else {
								alert(r.msg);
							}
						}
					});
				},
				del: function(event) {
					var pinKaoCourseIds = getSelectedRows();
					if(pinKaoCourseIds == null) {
						return;
					}

					confirm('确定要删除选中的记录？', function() {
						$.ajax({
							type: "POST",
							url: baseURL + "pinkao/pinkaocourse/delete",
							contentType: "application/json",
							data: JSON.stringify(pinKaoCourseIds),
							success: function(r) {
								if(r.code == 0) {
									alert('操作成功', function(index) {
										$("#jqGrid").trigger("reloadGrid");
									});
								} else {
									alert(r.msg);
								}
							}
						});
					});
				},
				getInfo: function(pinKaoCourseId) {
					$.get(baseURL + "pinkao/pinkaocourse/info/" + pinKaoCourseId, function(r) {
						vm.pinKaoCourse = r.pinKaoCourse;
					});
				},
				reload: function(event) {
					vm.showList = true;
					var page = $("#jqGrid").jqGrid('getGridParam', 'page');
					$("#jqGrid").jqGrid('setGridParam', {
						page: page
					}).trigger("reloadGrid");
				}
			}
		});
	</script>

</html>